<template>
  <div>
    <h1>WebSocketDemo</h1>
    <div>
      <el-button
        :disabled="isConnect"
        @click="connect"
      >
        连接
      </el-button>
      <el-button
        :disabled="!isConnect"
        @click="disConnect"
      >
        断开
      </el-button>
      <span>
        token：
        <el-input
          style="width:300px;margin-top:20px;"
          v-model="token"
        />
      </span>
      <span>
        服务器：
        <el-input
          style="width:300px;margin-top:20px;"
          v-model="server"
        />
      </span>
    </div>
    <div style="margin-top:20px;">
      <span>
        用户订阅信息：
      </span>
      <el-button
        :disabled="isAdminSubscribe"
        @click="adminSubscribe"
      >
        订阅
      </el-button>
      <el-button
        :disabled="!isAdminSubscribe"
        @click="adminUnsubscribe"
      >
        退订
      </el-button>
    </div>
    <div>
      <span>
        会话订阅消息：
      </span>
      <span>
        <el-input
          style="width:200px;margin-top:20px;"
          v-model="subscribeId"
          placeholder="请输入会话ID"
        />
      </span>
      <el-button
        style="margin-left:10px"
        :disabled="isCustomSubscribe"
        @click="customSubscribe"
      >
        订阅
      </el-button>
      <el-button
        :disabled="!isCustomSubscribe"
        @click="customUnsubscribe"
      >
        退订
      </el-button>
    </div>
    <div>
      <span>
        调试订阅消息：
      </span>
      <span>
        <el-input
          style="width:200px;margin-top:20px;"
          v-model="dz"
          placeholder="请输入主题地址"
        />
        <el-input
          style="width:200px;margin-top:20px;"
          v-model="topic"
          placeholder="请输入主题标识"
        />
      </span>
      <el-button
        style="margin-left:10px"
        :disabled="isabCustomSubscribe"
        @click="abcustomSubscribe"
      >
        订阅
      </el-button>
      <el-button
        :disabled="!isabCustomSubscribe"
        @click="abcustomUnsubscribe"
      >
        退订
      </el-button>
    </div>
  </div>
</template>

<script>
import SockJS from  'sockjs-client';
import Stomp from 'stompjs';
export default {
  name:"WebSocketDemo",
  data () {
    return {
      token: '48943d5e-7fef-4785-b14d-9ecc083a4181',
      server: 'http://127.0.0.1:8000/api-video',
      isConnect: false,
      stomp: '',
      isAdminSubscribe: false,
      isCustomSubscribe: false,
      isabCustomSubscribe: false,
      adminSub: null,
      customSub: null,
      abcustomSub: null,
      subscribeId: 'lenz',
      topic: 'text.p2p_message',
      dz: '/queue/issue/textIssued'
    }
  },
  mounted() {
    // console.log(SockJS)
    // console.log(Stomp)
  },
  methods: {
    test(a) {
      console.log(a)
    },
    // 连接
    connect() {
      if(!this.server || !this.token) return this.$message.warning('token与服务器不能为空')
      let url = this.server + '/ws-stomp?access_token=' + this.token
      let socket = new SockJS(url)
      this.stomp = Stomp.over(socket);
      this.stomp.heartbeat.outgoing = 25000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
      this.stomp.heartbeat.incoming = 0; //客户端不从服务端接收心跳包,
      let headers = {}
      //连接 这里可以传递token或者其他附加信息
      this.stomp.connect(headers, (frame) => {
          this.isConnect = true
          console.log(frame)
      })
    },
    // 断开连接
    disConnect() {
      if (this.stomp) {
        this.stomp.disconnect()
      }
      this.isConnect = false
    },
    // 用户订阅
    adminSubscribe() {
      if(!this.stomp) return this.$message.warning('未建立连接')
      let queue = "/user/queue/userCarMessage"
      //用户模式
      //自定义header 也可以重写id ,"id"=mysubid
      let headers = {"Custom-Subscribe-Topic": "car.user_message"}
      this.adminSub = this.stomp.subscribe(queue, (res) => {
        console.log(res)
      }, headers);
      this.isAdminSubscribe = true
    },
    adminUnsubscribe() {
      this.adminSub.unsubscribe()
      this.isAdminSubscribe = false
    },
    // 会话订阅
    customSubscribe() {
      if(!this.stomp) return this.$message.warning('未建立连接')
      let queue = "/queue/p2pCarMessage/" + this.subscribeId
      let headers = {"Custom-Subscribe-Topic": "car.p2p_message",id:this.subscribeId}
      this.customSub = this.stomp.subscribe(queue, (res) => {
        console.log(res)
      }, headers);
      this.isCustomSubscribe = true
    },
    customUnsubscribe() {
      this.customSub.unsubscribe()
      this.isCustomSubscribe = false
    },
    // 调试会话订阅
    abcustomSubscribe() {
      if(!this.stomp) return this.$message.warning('未建立连接')
      let queue = this.dz + "/" + this.subscribeId
      let headers = {"Custom-Subscribe-Topic": this.topic,id:this.subscribeId}
      this.abcustomSub = this.stomp.subscribe(queue, (res) => {
        console.log(res)
      }, headers);
      this.isabCustomSubscribe = true
    },
    abcustomUnsubscribe() {
      this.abcustomSub.unsubscribe()
      this.isabCustomSubscribe = false
    }
  }
}
</script>

<style>

</style>